<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-nested.tld" prefix="nested" %>
<html:html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<title></title>
	<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
	<script language="javascript" src="/js/json2.js"></script>
	<script language="javascript" src="/js/litpen_ajax.js"></script>
	
	<style type="text/css" >
		.fencheng{
			background-color:#ACD3F7;
		}
		.fencheng2{
			background-color:#eee;
		}
	</style>
    <script language="javascript" type="text/javascript">
    //<![CDATA[
    	var designers = null;
    	var standByItem = false;
    	var standByDesigner = false;
    	var sendRequest = false;
    	var timeId;
    	function initPage(){
	    	loadDesigner();
	    	loadMOrder();
	    	timeId = setInterval("bindDesigner()",40);
    	}
    	
    	function loadMOrder(){
    		var url = "/mycndesign/showMOrders.do";
    		var check_ajax = new Ajax(url,null,true,loadMOrderCallBack,"get");
    		check_ajax.send();
    	}
    	
    	function loadDesigner(){
    		var url = "/mycndesign/showDesigner.do";
    		var check_ajax = new Ajax(url,null,true,loadDesignerCallBack,"get");
    		check_ajax.send();
    	}
    	
    	function loadItem(){
    		var url = "/mycndesign/showItems.do";
    		var check_ajax = new Ajax(url,null,true,loadItemCallBack,"get");
    		check_ajax.send();
    	}
    	
    	function addDesigner(){
			var form = document.forms['addDesignForm'];
			var check_ajax = new Ajax(form.action,formToRequestString(form),true,addDesignerCallback,"post");
			check_ajax.send();
		}
		
		function addItem(){
			var form = document.forms['addItemForm'];
			var check_ajax = new Ajax(form.action,formToRequestString(form),true,addItemCallback,"post");
			check_ajax.send();
		}
		
		function deleteDesigner(id,name){
			if (confirm("确定删除？" + name)){
				var url = "/mycndesign/deleteDesigner.do?did=" + id;
	    		var check_ajax = new Ajax(url,null,true,deleteDesignerCallBack,"get");
	    		check_ajax.send();
			}
		}
		
    	function deleteItem(id,name){
			if (confirm("确定删除？" + name)){
				var url = "/mycndesign/deleteItem.do?pid=" + id;
	    		var check_ajax = new Ajax(url,null,true,deleteItemCallBack,"get");
	    		check_ajax.send();
			}
		}
		
		function updateItemOP(){
			var form = document.forms['updateItemForm'];
			var check_ajax = new Ajax(form.action,formToRequestString(form),true,updatePackageOPCallback,"post");
			check_ajax.send();
		}
		
		function updateDesignOP(){
			var form = document.forms['updateDesigner'];
			var check_ajax = new Ajax(form.action,formToRequestString(form),true,updateDesignOPCallback,"post");
			check_ajax.send();
		}
		
    	function loadMOrderCallBack(){
    		var result = arguments[0];

			if (check_error(result)){
				var error = result.split(":");
				alert(error[1]);
				return;
			}
			
			//开始获取数据
			var myData = JSON.parse(result,null);
			
			var oTBody = document.getElementById("orderData");
			while (oTBody.hasChildNodes()){
				oTBody.removeChild(oTBody.firstChild);
			}
			for (var i = 0; i< myData.orders.length;i++){
				//Tr格式化
				var oRow = document.createElement("TR");
				oRow.setAttribute("align","center");
				if (i % 2 ==1)
					oRow.className = "fencheng";
				else
					oRow.className = "fencheng2";
				oTBody.appendChild(oRow);
				
				
                //td初始化
				oCell = document.createElement("TD");
				oCell.innerText = myData.orders[i].userName;
				oRow.appendChild(oCell);
				
				oCell = document.createElement("TD");
				oCell.innerText = myData.orders[i].productName;
				oRow.appendChild(oCell);
				
				oCell = document.createElement("TD");
				oCell.innerText = myData.orders[i].productPoint;
				oRow.appendChild(oCell);
				
				oCell = document.createElement("TD");
				oCell.innerText = myData.orders[i].productQty;
				oRow.appendChild(oCell);
				
				oCell = document.createElement("TD");
				oCell.innerText = myData.orders[i].orderId;
				oRow.appendChild(oCell);
				
				//操作
				oCell = document.createElement("TD");
				oCell.innerText = myData.orders[i].createTime;
				oRow.appendChild(oCell);
				
			}
			document.getElementById("orderPage").innerHTML=myData.pageStr;
				
    	}
    	
    	function loadDesignerCallBack(){
    		var result = arguments[0];
				
			if (check_error(result)){
				var error = result.split(":");
				alert(error[1]);
				return;
			}
			
			//开始获取数据
			var myData = JSON.parse(result,null);
			
			var oTBody = document.getElementById("designerData");
			while (oTBody.hasChildNodes()){
				oTBody.removeChild(oTBody.firstChild);
			}
			designers = new Array();
			
			for (var i = 0; i< myData.designers.length;i++){
				designers.push(new Array(myData.designers[i].designerId,myData.designers[i].imvuName));
				//Tr格式化
				var oRow = document.createElement("TR");
				oRow.setAttribute("align","center");
				if (i % 2 ==1)
					oRow.className = "fencheng";
				else
					oRow.className = "fencheng2";
				oTBody.appendChild(oRow);
				
				//td初始化
				oCell = document.createElement("TD");
				oCell.innerText = myData.designers[i].imvuName;
				oRow.appendChild(oCell);
				oCell = document.createElement("TD");
				oCell.innerText = myData.designers[i].gender;
				oRow.appendChild(oCell);
				
				oCell = document.createElement("TD");
				oCell.innerText = myData.designers[i].age;
				oRow.appendChild(oCell);
				
				oCell = document.createElement("TD");
				oCell.innerText = myData.designers[i].country;
				oRow.appendChild(oCell);
				
				oCell = document.createElement("TD");
				oCell.innerHTML = "<a href='" + myData.designers[i].homePage + "' alt='" + myData.designers[i].introduce + "' target='_blank'>点击这里</a>";
				oRow.appendChild(oCell);
				
				oCell = document.createElement("TD");
				oCell.innerText = myData.designers[i].creatorTime;
				oRow.appendChild(oCell);
				
				oCell = document.createElement("TD");
				oCell.innerHTML = "<input type='button' onclick='deleteDesigner(" + myData.designers[i].designerId + ",\"" + myData.designers[i].imvuName + "\");' value='删除'><input type='button' onClick='update(this," + myData.designers[i].designerId + ");' value='修改'>";
				oRow.appendChild(oCell);

				
			}
			
			var form = document.forms['addItemForm'];
			var form2 = document.forms('updateItemForm');
			for(var j=form.designerId.options.length; j>=0; j--) {
				form.designerId.remove(j);
				
        	}
        	for(var j=form2.designerId.options.length; j>=0; j--) {
				form2.designerId.remove(j);
				
        	}
        	for (var i=0;i<designers.length;i++){
        		var optional=document.createElement("option");
          		optional.value=designers[i][0];
          		optional.text=designers[i][1];
          		var optional2=document.createElement("option");
          		optional2.value=designers[i][0];
          		optional2.text=designers[i][1];
          		
				form.designerId.add(optional);
				form2.designerId.add(optional2);
        	}
			
			standByDesigner = true;
    	}
    	
    	function loadItemCallBack(){
    		var result = arguments[0];
				
			if (check_error(result)){
				var error = result.split(":");
				alert(error[1]);
				return;
			}
			
			//开始获取数据
			var myData = JSON.parse(result,null);
			
			var oTBody = document.getElementById("itemData");
			while (oTBody.hasChildNodes()){
				oTBody.removeChild(oTBody.firstChild);
			}
			
			for (var i = 0; i< myData.orders.length;i++){
				//Tr格式化
				var oRow = document.createElement("TR");
				oRow.setAttribute("align","center");
				if (i % 2 ==1)
					oRow.className = "fencheng";
				else
					oRow.className = "fencheng2";
				oTBody.appendChild(oRow);
				
				//td初始化
				oCell = document.createElement("TD");
				oCell.innerText = myData.orders[i].productName;
				oRow.appendChild(oCell);
				
				oCell = document.createElement("TD");
				//oCell.innerText = myData.orders[i].designerId;
				for (var j = 0; j<designers.length;j++){
					if (myData.orders[i].designerId == designers[j][0]){
						oCell.innerText = designers[j][1];	
						break;
					}
				}
				if (oCell.innerText == ""){
					oCell.innerText = "没有绑定设计者";
				}
				oRow.appendChild(oCell);
				
				oCell = document.createElement("TD");
				oCell.innerText = myData.orders[i].creditAmount;
				oRow.appendChild(oCell);
				
				oCell = document.createElement("TD");
				oCell.innerText = myData.orders[i].mPoint;
				oRow.appendChild(oCell);
				
				oCell = document.createElement("TD");
				img = document.createElement("img");
				img.setAttribute("src",myData.orders[i].path);
				oCell.appendChild(img);
				//oCell.innerText = myData.orders[i].path;
				oRow.appendChild(oCell);
				
				oCell = document.createElement("TD");
				oCell.innerHTML = "<a href='" + myData.orders[i].att + "' target='_blank'>点击这里</a>";
				oRow.appendChild(oCell);
				
				oCell = document.createElement("TD");
				oCell.innerText = myData.orders[i].sort;
				oRow.appendChild(oCell);
				
			
				oCell = document.createElement("TD");
				oCell.innerText = myData.orders[i].createTime;
				oRow.appendChild(oCell);
				//操作	
				oCell = document.createElement("TD");
				oCell.innerHTML = "<input type='button' onclick='deleteItem(" + myData.orders[i].productId + ",\"" + myData.orders[i].productName + "\");' value='删除'><input type='button' onClick='updateItem(this," + myData.orders[i].productId + "," + myData.orders[i].imvuProductId + ");' value='修改'>";
				oRow.appendChild(oCell);
				
			}
			document.getElementById("itemPage").innerHTML=myData.pageStr;
			
			
    	}
    	
    	function addDesignerCallback(){
    		var form = document.forms("addDesignForm");
    		var result = arguments[0];
    		var result2 = result.split("||");
    		if (result2[0] == "1"){
    			loadDesigner();
    		}
    		alert(result2[1]);
    		form.reset();
    		
    	}
    	
    	function addItemCallback(){
    		var form = document.forms("addItemForm");
    		var result = arguments[0];
    		var result2 = result.split("||");
    		if (result2[0] == "1"){
    			loadItem();
    		}
    		alert(result2[1]);
    		form.reset();
    	}
    	
    	function deleteDesignerCallBack(){
    		var result = arguments[0];
    		var result2 = result.split("||");
    		if (result2[0] == "1"){
    			loadDesigner();
    		}
    		alert(result2[1]);
    	}
    	
    	function deleteItemCallBack(){
			var result = arguments[0];
    		var result2 = result.split("||");
    		if (result2[0] == "1"){
    			loadItem();
    		}
    		alert(result2[1]);
		}
		
		function updateItemOPCallback(){
			var result = arguments[0];
    		var result2 = result.split("||");
    		if (result2[0] == "1"){
    			loadPackage();
    		}
    		alert(result2[1]);
			var updatePackage = document.getElementById('updatePackageDiv');
			updatePackage.style.display = 'none';
		}
		
		function updateDesignOPCallback(){
			var result = arguments[0];
    		var result2 = result.split("||");
    		if (result2[0] == "1"){
    			loadDesigner();
    		}
    		alert(result2[1]);
			var updatePackage = document.getElementById('updateDesignerDiv');
			updatePackage.style.display = 'none';
		}
		
		function update(obj,id){

			var updateDesigner = document.getElementById('updateDesignerDiv');
			
			updateDesigner.style.left = document.body.clientWidth / 2 - 360/2;
				
			updateDesigner.style.top = document.body.clientHeight / 2 - 200/2;
				
			updateDesigner.style.display = 'block';
			var parent = obj.parentNode.parentNode;

			var tds = parent.getElementsByTagName("td");
			var form = document.forms('updateDesigner');
			form.did.value = id;
			form.imvuName.value = tds[0].innerText;
			for (var i = 0;i < form.gender.length;i++){
				if (tds[1].innerText == form.gender[i].value){
					form.gender[i].checked = true;
					break;
				}
			}
			form.age.value = tds[2].innerText;
			form.country.value = tds[3].innerText;
			var link = tds[4].getElementsByTagName("a");
			form.homePage.value = link[0].getAttribute("href");
			form.introduce.value = link[0].getAttribute("alt");
		}
		
		function updateItem(obj,id,imvuProductId){

			var updateItemDiv = document.getElementById('updateItemDiv');

			updateItemDiv.style.left = document.body.clientWidth / 2 - 360/2;
				
			updateItemDiv.style.top = document.body.clientHeight / 2 - 200/2;

			updateItemDiv.style.display = 'block';
			var parent = obj.parentNode.parentNode;

			var tds = parent.getElementsByTagName("td");
			var form = document.forms('updateItemForm');
			
			form.itemName.value = tds[0].innerText;
            
            form.designerId.value = tds[1].innerText;
            for (var j = 0; j<designers.length;j++){
				if (tds[1].innerText == designers[j][1]){
					if (form.designerId.options.length >= j){
						form.designerId.options[j].selected = true;	
						break;
					}
				}
			}
            
            
            form.creditAmount.value = tds[2].innerText;
			form.mPoint.value = tds[3].innerText;
			
			
			var imgs = tds[4].getElementsByTagName("img");
			form.imagePath.value = imgs[0].getAttribute("src");
			var link = tds[5].getElementsByTagName("a");
			form.introduce.value = link[0].getAttribute("href");
			form.sort.value = tds[6].innerText;
			form.id.value = id;
			form.imvuProductId.value = imvuProductId;
						
			
		}
    	
    	function check_error(str){
				if (str.indexOf("errors") != -1)
					return true;
				return false;
		}
		
		function bindDesigner(){
			//检测仓库列表是否下载完毕
			if (standByDesigner == true && standByItem == false){
				//检查是否已经发送了请求获取套餐列表
				if (sendRequest == false){
					loadItem();
					sendRequest = true;
				}
			}
			
			//当套餐列表获取成功后，去除定时器动作
			if (timeId != null && standByItem == true){
				clearInterval(timeId);
				timeId = null;
				sendRequest = false;
				standByDesigner = false;
				standByItem = false;
			}
		}
		function closeDiv(divID){
			var div = document.getElementById(divID);
			div.style.display="none";
		}
		
		function goToPageItem(url){
			var check_ajax = new Ajax(url,null,true,loadItemCallBack,"get");
    		check_ajax.send();
		}
		
		function goToPage(url){
			var check_ajax = new Ajax(url,null,true,loadMOrderCallBack,"get");
    		check_ajax.send();
		}
		
	//]]>
    </script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>

<body >
<div id="TabbedPanels2" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">新增道具</li>
    <li class="TabbedPanelsTab" tabindex="0">新增设计者</li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">
    	<form name="addItemForm" action="/mycndesign/addItem.do" method="post">
        	<label for="itemName">道具名称：</label><input type="text" name="itemName" />&nbsp; <label for="imvuProductId">Imvu产品ID号：</label><input type="text" name="imvuProductId" /><br/>
        	<label for="creditAmount">价格(credits)：</label><input type="text" name="creditAmount" /><label for="mPoint">MPoint数量：</label><input type="text" name="mPoint" /><br/>
        	<label for="imagePath">图片路径:</label><input type="text" value="http://" name="imagePath"><br/>
        	<label for="sort">排序</label><input type="text" size="3" name="sort"><br/>
        	<label for="designerId">设计者：</label><select name="designerId" id="storeList"><option value="1">tangdesign</option></select><br/>
        	<label for="introduce">介绍：</label><textarea name="introduce"></textarea><br/>
        	<input type="button" onClick="addItem();" value="增加"> &nbsp;&nbsp; <input type="reset" value="重置">
        </form>
    </div>
    <div class="TabbedPanelsContent">
    	<form action="/mycndesign/addDesigner.do" name="addDesignForm" method="post">
    		<label for="imvuName">设计者名称：</label><input type="text" name="imvuName" />&nbsp;&nbsp;<label for="age">年龄：</label><input name="age" type="text"><br/>
    		<label for="country">国家：</label><input type="text" name="country" />&nbsp;&nbsp;<label for="gender">性别：</label><input type="radio" value="m" name="gender" />男 <input type="radio" value="f" name="gender" />女 <br/>
    		<label for="homePage">主页：</label><input type="text" name="homePage" value="http://"/>&nbsp;&nbsp;<br/>
    		<label for="introduce">介绍：</label><textarea name="introduce"></textarea><br/>
    		
    		<input type="button" onClick="addDesigner();" value="增加"> &nbsp;&nbsp; <input type="reset" value="重置">
    	</form>
    </div>
  </div>
</div>
<div style="padding:10px 10px">&nbsp;</div>
<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">道具列表</li>
    <li class="TabbedPanelsTab" tabindex="0">道具兑换列表</li>
    <li class="TabbedPanelsTab" tabindex="0">设计者列表</li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent" style="text-align:center;">
      <table width="95%" align="center" cellpadding="2" cellspacing="1" bgcolor="#FFFFFF" style="border:1px solid #56626d;font-size:12px">
      		<thead>
            <tr style="background-color:#46525d; color:#FFFFFF">
            	<th>道具名称</th>
                <th>设计者</th>
                <th>单价</th>
                <th>兑换积分</th>
                <th>图片</th>
                <th>介绍地址</th>
                <th>排序</th>
                <th>创建时间</th>
             	<th>操作</th>
            </tr>
            </thead>
            <tbody id ="itemData">
            	
            </tbody>
      </table>
      <div id="itemPage"></div>
    </div>
    <div class="TabbedPanelsContent" style="text-align:center;">
   	  <table width="70%" align="center" cellpadding="2" cellspacing="1" bgcolor="#FFFFFF" style="border:1px solid #56626d;font-size:12px">
      		<thead>
            <tr style="background-color:#46525d; color:#FFFFFF">
            	<th>用户名称</th>
                <th>产品名称</th>
                <th>产品兑换积分</th>
                <th>产品数量</th>
                <th>订单号</th>
                <th>日期</th>
            </tr>
            </thead>
            <tbody id="orderData">
            
            </tbody>
      </table>
      <div id="orderPage"></div>
    </div>
    <div class="TabbedPanelsContent" style="text-align:center;">
   	  <table width="70%" align="center" cellpadding="2" cellspacing="1" bgcolor="#FFFFFF" style="border:1px solid #56626d;font-size:12px">
      		<thead>
            <tr style="background-color:#46525d; color:#FFFFFF">
            	<th>设计者名称</th>
                <th>性别</th>
                <th>年龄</th>
                <th>国家</th>
                <th>个人网页</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="designerData">
            
            </tbody>
      </table>
    </div>
  </div>
</div>


<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
initPage();
//-->
</script>
<div class="test" id="updateItemDiv" style="position:absolute;">
			<form method="POST" action="/mycndesign/updateItem.do" name="updateItemForm" >
				<table width="360" height="400">
				<input type="hidden" name="id"/>
				<tr style="border:1px solid #56626d;">
				<td align="right"><label for="itemName">道具名称：</label></td><td><input type="text" name="itemName"></td>
				</tr>
				<tr>
					<td align="right"><label for="creditAmount">Credits数量：</label></td>
					<td><input type="text" name="creditAmount"></td>
				</tr>
				<tr>
					<td align="right"><label for="mPoint">M-Points：</label></td><td><input type="text" name="mPoint"></td>
				</tr>
                <tr>
					<td align="right"><label for="imvuProductId">IMVU产品ID：</label></td><td><input type="text" name="imvuProductId"></td>
				</tr>
				<tr>
					<td align="right"><label for="imagePath">图片路径：</label></td><td><input type="text" name="imagePath"></td>
				</tr>
				<tr>
					<td align="right"><label for="introduce">介绍地址：</label></td><td><input name="introduce" type="text"></td>
				</tr>
				<tr>
					<td align="right"><label for="sort">排序：</label></td><td><input name="sort" type="text" size="4"></td>
				</tr>
				<tr>
					<td align="right"><label for="designerId">设计者：</label></td><td><select name="designerId" id="storeList"><option value="1">tangdesign</option></select></td>
				</tr>
				<tr>
					<td align="center" colspan="2"><button onClick="updateItemOP();" name="btnAction">修改</button>&nbsp;&nbsp;&nbsp;<button onClick="reset();" name="btnCancel">取消</button>&nbsp;&nbsp;&nbsp;<button onClick="closeDiv('updateItemDiv');">关闭</button></td>
				</tr>
				</table>
			</form>
		
		</div>
<div class="test" id="updateDesignerDiv" style="position:absolute;">
			<form method="POST" action="/mycndesign/updateDesigner.do" name="updateDesigner" >
				<table width="360" height="400">
				<input type="hidden" name="did"/>
				<tr style="border:1px solid #56626d;">
				<td align="right"><label for="imvuName">设计者名称：</label></td><td><input type="text" name="imvuName"></td>
				</tr>
				<tr>
					<td align="right"><label for="country">国家：</label></td>
					<td><input type="text" name="country"></td>
				</tr>
				<tr>
					<td align="right"><label for="age">年龄：</label></td>
					<td><input type="text" name="age"></td>
				</tr>
				<tr>
					<td align="right"><label for="homePage">主页：</label></td>
					<td><input type="text" name="homePage"></td>
				</tr>
				<tr>
					<td align="right"><label for="gender">性别：</label></td>
					<td><input type="radio" value="m" name="gender" />男 <input type="radio" value="f" name="gender" />女</td>
				</tr>
				<tr>
					<td align="right"><label for="introduce">介绍：</label></td>
					<td><textarea name="introduce"></textarea></td>
				</tr>
                <tr>
					<td align="center" colspan="2"><button onClick="updateDesignOP();" name="btnAction">修改</button>&nbsp;&nbsp;&nbsp;<button onClick="reset();" name="btnCancel">取消</button>&nbsp;&nbsp;&nbsp;<button onClick="closeDiv('updateDesignerDiv');">关闭</button></td>
				</tr>
				</table>
			</form>
		
		</div>
	</body>
</html:html>
